<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户项目案例</title>
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<h4 align="center">用户新增</h4>
				<table align="center">
					<tr>
						<td>姓名:<input type="text" v-model="user.name"/> </td>
						<td>年龄:<input type="text" v-model="user.age"/></td>
						<td>性别:<input type="text" v-model="user.sex"/></td>
						<td><button @click="insertOne()">新增</button> </td>
					</tr>
				</table>
			</div>
			<div>
				<h4 align="center">用户修改</h4>
				<table align="center">
					<tr>
						<td>编号:<input type="text" v-model="upuser.id" disabled/></td>
						<td>姓名:<input type="text" v-model="upuser.name"/> </td>
						<td>年龄:<input type="text" v-model="upuser.age"/></td>
						<td>性别:<input type="text" v-model="upuser.sex"/></td>
						<td><button @click="updateUserById()">修改</button> </td>
					</tr>
				</table>
			</div>
			<div align="center">
				<table border="1px" width="1000px" align="center" bordercolor="blue">
					<tr align="center">
						<th align="center" colspan="5">用户列表</th>
					</tr>
					<tr align="center">
						<td>编号</td>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
						<td>修改</td>
					</tr>
					<tr align="center" v-for="user1 in userlist">
						<td v-text="user1.id"></td>
						<td v-text="user1.name"></td>
						<td v-text="user1.age"></td>
						<td v-text="user1.sex"></td>
						<td width="110px"> 
							<button @click="echo(user1)">修改</button>
							<button @click="deleteUserOne(user1)">删除</button>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<script>
		//定义axios的请求前缀:定义请求前缀后使用时不需要写繁琐的前缀，只需要写业务
		axios.defaults.baseURL = 'http://localhost:8090/vue'
		const app = new Vue({
			el:"#app",
			data:{
				userlist:[],
				user:{
					name:'',
					age:'',
					sex:''
				},
				upuser:{
					id:'',
					name:'',
					age:'',
					sex:''
				}
			},
			methods:{
				getUserList:function(){
					axios.get('/findAll').then(
					premise=>{
						this.userlist=premise.data
					})},
					
					insertOne:function(){
						let user = this.user
						axios.post(`/insertUserOne`,user).then(
						insertput=>{
							alert(insertput.data)//获取操作提示
							this.getUserList()//调用查询刷新
							this.user={}
						}
						)
					},
					deleteUserOne:function(user1){
						axios.delete(`/deleteUserOne/${user1.id}`).then(
						del=>{
							alert(del.data)
							this.getUserList()
						}
						)
						// axios.delete('/deleteUserOne?id='+user1.id).then(
						// del=>{             普通传参
						// 	alert(del.data)
						// 	this.getUserList()
						// }
						// )
						
					},
					echo:function(user1){
						this.upuser=user1
						this.getUserList()
					},
					updateUserById:function(){
						axios.put("/updateUserById",this.upuser).then(
						up=>{
							alert(up.data)
							this.getUserList()
							this.upuser={}
						}
						)
					}
			},
			// 利用声明周期函数调用Ajax方法
			mounted:function(){
				this.getUserList()
			}
		})
		</script>
	</body>
</html>
